
layui.define(['layer', 'element', 'form', 'table', 'Vue', '$http'], function (exports) {
    var $ = layui.$;
    var element = layui.element;
    var form = layui.form;
    var table = layui.table;
    var $http = layui.$http;
    var Vue = layui.Vue;
    var zmnUtils = layui.zmnUtils;

    var priceTableVM = null;

	var PRODUCT_PRICE_URL = '/work/price/table/detail.action';

    /**
     * 获取价格表数据
     * @param cityId
     * @param channelId
     * @param productId
     * @returns {*}
     */
    function fetchPriceData({cityId, channelId, productId, brandId, bizType,type,plat, productShowType, orderId, workId}) {
        return $http.get(PRODUCT_PRICE_URL, {cityId, channelId, productId, brandId, bizType,type,plat, productShowType, orderId, workId});
    }

    function initPriceTableByVUE (selector, title) {
        var vm = new Vue({
            el: selector,
            template: `<table class="table-price">
                <caption>
                    {{ priceData.servTypeName }}
                </caption>
                <thead><tr><th>项目类型</th><th>服务项目</th><th>后台产品</th><th>项目价格</th></tr></thead>
                <tbody>
                    <template v-for="(categ, index) in priceData.priceList">
                        <template  v-for="(item, i) in categ.items">
                            <template  v-for="(backProductItem, j) in item.serviceItems">
                                <tr v-if="i === 0 && j === 0">
                                    <td :rowspan="categ.rowspan">{{ categ.categName }}</td>
                                    <td :rowspan="item.serviceItems.length">{{ item.itemName }}</td>
                                    <td>{{ backProductItem.backProductName }}</td>
                                    <td>{{ backProductItem | priceFormater }}</td>
                                </tr>
                                <tr v-else-if="i != 0 && j === 0">
                                    <td :rowspan="item.serviceItems.length">{{ item.itemName }}</td>
                                    <td>{{ backProductItem.backProductName }}</td>
                                    <td>{{ backProductItem | priceFormater }}</td>
                                </tr>
                                <tr v-else>
                                    <td>{{ backProductItem.backProductName }}</td>
                                    <td>{{ backProductItem | priceFormater }}</td>
                                </tr>
                            </template>
                        </template>
                    </template>
                    
                   <tr class="none" v-if="!priceData.priceList || !priceData.priceList.length"><td colspan="4">暂无价格数据</td></tr>
                  
                   <template  v-if="priceData.additionalItemsPriceList && priceData.additionalItemsPriceList.length>0">
                    <tr>
                        <td colspan="4">
                        <table class="table-price">
                                <tr ><td colspan="2">附加项明细</td></tr>
                                <tr ><td width="50%">附加项目</td><td>价格</td></tr>
                                    <template v-for="(categ, index) in priceData.additionalItemsPriceList">
                                        <template  v-for="(item, i) in categ.items">
                                                <template  v-for="(backProductItem, j) in item.serviceItems">
                                                    <tr v-if="i === 0 && j === 0">
                                                        <td >{{ item.itemName }}</td>
                                                        <td>{{ backProductItem | priceFormater }}</td>
                                                    </tr>
                                                    <tr v-else-if="i != 0 && j === 0">
                                                        <td >{{ item.itemName }}</td>
                                                        <td>{{ backProductItem | priceFormater }}</td>
                                                    </tr>
                                                </template>
                                        </template>
                                    </template>
                                    </table>
                                </td>
                            </td>
                        </tr>
                     </template>
                </tbody>
                <tfoot v-if="priceData.desc">
                    <tr>
                        <td colspan="4">
                            <p>服务说明：</p>
                            <p v-for="item in priceData.desc">{{ item }}</p>
                        </td>
                    </tr>
                </tfoot>
            </table>`,
            filters: {
                priceFormater: function (item) {
                    var formaterStr;
                    if (item.price == null) {
                        formaterStr = '面议';
                        if (item.negotiableMinPrice && item.negotiableMaxPrice) {
                            formaterStr = formaterStr + "(" + zmnUtils.unit.fenToYuan(item.negotiableMinPrice) + '元~' + zmnUtils.unit.fenToYuan(item.negotiableMaxPrice) + "元)";
                        } else if (item.negotiableMinPrice) {
                            formaterStr = formaterStr + "(最低价：" + zmnUtils.unit.fenToYuan(item.negotiableMinPrice) + '元)';
                        } else if (item.negotiableMaxPrice) {
                            formaterStr = formaterStr + "(最高价：" + zmnUtils.unit.fenToYuan(item.negotiableMaxPrice) + '元)';
                        }
                    } else {
                        formaterStr = (item.price / 100).toFixed(2) + `元`;
                        if (item.unit) {
                            formaterStr += `/${item.unit}`
                        }
                    }
                    return  formaterStr;
                }
            },
            data: function () {
                return {
                    priceData: {},
                    title: title
                };
            }
        });

        return vm;
    }


    function initPriceTable ({ priceListVO }) {
        priceTableVM.$set(priceTableVM.$data, 'priceData', priceListVO);
    }

    function  initPage () {
        priceTableVM = initPriceTableByVUE('#zmn-price-table', '价格表');
    }

    function initEvent () {
        form.on('submit()', function (data) {
            fetchPriceData(data.field).then(function (data) {
                initPriceTable(data);
            });
            return false;
        });
    }

    function init () {
        initPage();
        initEvent();

        // 默认触发查询
        $('.layui-form .layui-btn').trigger('click');
    }

    init();
    exports('zmn_oms_price_order_list');
});
